<template>
    <div>
        <div class="flex items-center">
            当前位置：
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/competition' }">
                    比赛信息
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{newsDetail.name}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="flex gap-4 mt-5">
            <div class="w-[1200px] bg-body rounded-[8px] flex-none p-5">
                <div class="border-b border-br pb-4">
                  <div>
                    <span class="font-medium text-[22px]">
                        {{ newsDetail.name }}
                    </span>
                  </div>
                    <div
                        class="mt-3 text-tx-secondary flex items-center flex-wrap"
                    >
                        <div class="flex items-center" v-if="newsDetail.createName">
                          <Icon name="el-icon-Avatar" />
                          <span>{{ newsDetail.createName }} &nbsp;|&nbsp;</span>
                        </div>
                        <div class="mr-4 flex items-center">
                          <span>{{ newsDetail.createTime }}</span>
                        </div>
                        <div class="mr-4 flex items-center">
                          <Icon name="el-icon-List" />
                          <span v-if="newsDetail.playType.includes('0')||(newsDetail.playType.includes('1')&&newsDetail.playType.includes('2')&&newsDetail.playType.includes('3')&&newsDetail.playType.includes('4')&&newsDetail.playType.includes('5'))">全类型</span>
                          <span v-if="newsDetail.playType.includes('1')">男单打</span>
                          <span v-if="newsDetail.playType.includes('2')">女单打</span>
                          <span v-if="newsDetail.playType.includes('3')">男双打</span>
                          <span v-if="newsDetail.playType.includes('4')">女双打</span>
                          <span v-if="newsDetail.playType.includes('5')">男女混打</span>
                        </div>
                        <div class="flex items-center">
                            <Icon name="el-icon-View" />
                            <span>&nbsp;{{ newsDetail.viewNum }}人浏览</span>
                        </div>
                    </div>
                </div>
              <div>&nbsp;</div>
              <el-row :gutter="20" :class="{
                'el-box-2':  newsDetail.playType.split(',').length==2||newsDetail.playType.split(',').length==1,
                'el-box-3':  newsDetail.playType.split(',').length==3,
                'el-box-4':  newsDetail.playType.split(',').length==4,
                'el-box-5':  newsDetail.playType.split(',').length==5,
              }">
                <el-col v-if="newsDetail.playType.includes('1')||newsDetail.playType.includes('0')">
                  <el-card class="match-card">
                    <template #header>
                      <span>男单打出场顺序</span>
                      <div style="font-size: 12px;font-weight: 700;" v-if="sessionData.playAddressOne">{{sessionData.playAddressOne.address}} {{sessionData.playAddressOne.name}}</div>
                    </template>
                    <div>
                      <ul>
                        <li v-for="(pair, index) in sessionData.playTypeOne" :key="index" style="cursor: pointer;" @click="handlePlay(pair)">
                          <div class="match-header">
                            <span class="order">
                              <span>第{{ index + 1 }}场</span>&nbsp;<span>{{pair.startTime}}</span>
                            </span>
                          </div>
                          <div class="match-info">
                            <div class="team">
                              <div v-for="(player, playerIndex) in pair.teamOne" :key="playerIndex" class="player-info">
                                <el-avatar :size="30" :src="player.avatar" />
                                <span class="single-line">{{ player.name }}</span>
                              </div>
                            </div>
                            <div>
                              <span class="score-text">{{pair.playOneScore}}</span>
                              <span class="vs-text">VS</span>
                              <span class="score-text">{{pair.playTwoScore}}</span>
                            </div>
                            <div class="team">
                              <div v-for="(player, playerIndex) in pair.teamTwo" :key="playerIndex" class="player-info">
                                <el-avatar :size="30" :src="player.avatar" />
                                <span class="single-line">{{ player.name }}</span>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </el-card>
                </el-col>
                <el-col v-if="newsDetail.playType.includes('3')||newsDetail.playType.includes('0')">
                  <el-card class="match-card">
                    <template #header>
                      <span>男双打出场顺序</span>
                      <div style="font-size: 12px;font-weight: 700;" v-if="sessionData.playAddressThree">{{sessionData.playAddressThree.address}} {{sessionData.playAddressThree.name}}</div>
                    </template>
                    <div>
                      <ul>
                        <li v-for="(pair, index) in sessionData.playTypeThree" :key="index" style="cursor: pointer;" @click="handlePlay(pair)">
                          <div class="match-header">
                            <span class="order">
                              <span>第{{ index + 1 }}场</span>&nbsp;<span>{{pair.startTime}}</span>
                            </span>
                          </div>
                          <div class="match-info">
                            <div class="team">
                              <div v-for="(player, playerIndex) in pair.teamOne" :key="playerIndex" class="player-info">
                                <el-avatar :size="30" :src="player.avatar" />
                                <span class="single-line">{{ player.name }}</span>
                              </div>
                            </div>
                            <div>
                              <span class="score-text">{{pair.playOneScore}}</span>
                              <span class="vs-text">VS</span>
                              <span class="score-text">{{pair.playTwoScore}}</span>
                            </div>
                            <div class="team">
                              <div v-for="(player, playerIndex) in pair.teamTwo" :key="playerIndex" class="player-info">
                                <el-avatar :size="30" :src="player.avatar" />
                                <span class="single-line">{{ player.name }}</span>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </el-card>
                </el-col>
                <el-col v-if="newsDetail.playType.includes('2')||newsDetail.playType.includes('0')">
                  <el-card class="match-card">
                    <template #header>
                      <span>女单打出场顺序</span>
                      <div style="font-size: 12px;font-weight: 700;" v-if="sessionData.playAddressTwo">{{sessionData.playAddressTwo.address}} {{sessionData.playAddressTwo.name}}</div>
                    </template>
                    <div>
                      <ul>
                        <li v-for="(pair, index) in sessionData.playTypeTwo" :key="index" style="cursor: pointer;" @click="handlePlay(pair)">
                          <div class="match-header">
                            <span class="order">
                              <span>第{{ index + 1 }}场</span>&nbsp;<span>{{pair.startTime}}</span>
                            </span>
                          </div>
                          <div class="match-info">
                            <div class="team">
                              <div v-for="(player, playerIndex) in pair.teamOne" :key="playerIndex" class="player-info">
                                <el-avatar :size="30" :src="player.avatar" />
                                <span class="single-line">{{ player.name }}</span>
                              </div>
                            </div>
                            <div>
                              <span class="score-text">{{pair.playOneScore}}</span>
                              <span class="vs-text">VS</span>
                              <span class="score-text">{{pair.playTwoScore}}</span>
                            </div>
                            <div class="team">
                              <div v-for="(player, playerIndex) in pair.teamTwo" :key="playerIndex" class="player-info">
                                <el-avatar :size="30" :src="player.avatar" />
                                <span class="single-line">{{ player.name }}</span>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </el-card>
                </el-col>
                <el-col v-if="newsDetail.playType.includes('4')||newsDetail.playType.includes('0')">
                  <el-card class="match-card">
                    <template #header>
                      <span>女双打出场顺序</span>
                      <div style="font-size: 12px;font-weight: 700;" v-if="sessionData.playAddressFour">{{sessionData.playAddressFour.address}} {{sessionData.playAddressFour.name}}</div>
                    </template>
                    <div>
                      <ul>
                        <li v-for="(pair, index) in sessionData.playTypeFour" :key="index" style="cursor: pointer;" @click="handlePlay(pair)">
                          <div class="match-header">
                            <span class="order">
                              <span>第{{ index + 1 }}场</span>&nbsp;<span>{{pair.startTime}}</span>
                            </span>
                          </div>
                          <div class="match-info">
                            <div class="team">
                              <div v-for="(player, playerIndex) in pair.teamOne" :key="playerIndex" class="player-info">
                                <el-avatar :size="30" :src="player.avatar" />
                                <span class="single-line">{{ player.name }}</span>
                              </div>
                            </div>
                            <div>
                              <span class="score-text">{{pair.playOneScore}}</span>
                              <span class="vs-text">VS</span>
                              <span class="score-text">{{pair.playTwoScore}}</span>
                            </div>
                            <div class="team">
                              <div v-for="(player, playerIndex) in pair.teamTwo" :key="playerIndex" class="player-info">
                                <el-avatar :size="30" :src="player.avatar" />
                                <span class="single-line">{{ player.name }}</span>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </el-card>
                </el-col>
                <el-col v-if="newsDetail.playType.includes('5')||newsDetail.playType.includes('0')">
                  <el-card class="match-card">
                    <template #header>
                      <span class="card-header">男女混打出场顺序</span>
                      <div style="font-size: 12px;font-weight: 700;" v-if="sessionData.playAddressFive">{{sessionData.playAddressFive.address}} {{sessionData.playAddressFive.name}}</div>
                    </template>
                    <div>
                      <ul>
                        <li v-for="(pair, index) in sessionData.playTypeFive" :key="index" style="cursor: pointer;" @click="handlePlay(pair)">
                          <div class="match-header">
                            <span class="order">
                              <span>第{{ index + 1 }}场</span>&nbsp;<span>{{pair.startTime}}</span>
                            </span>
                          </div>
                          <div class="match-info">
                            <div class="team">
                              <div v-for="(player, playerIndex) in pair.teamOne" :key="playerIndex" class="player-info">
                                <el-avatar :size="30" :src="player.avatar" />
                                <span class="single-line">{{ player.name }}</span>
                              </div>
                            </div>
                            <div>
                              <span class="score-text">{{pair.playOneScore}}</span>
                              <span class="vs-text">VS</span>
                              <span class="score-text">{{pair.playTwoScore}}</span>
                            </div>
                            <div class="team">
                              <div v-for="(player, playerIndex) in pair.teamTwo" :key="playerIndex" class="player-info">
                                <el-avatar :size="30" :src="player.avatar" />
                                <span class="single-line">{{ player.name }}</span>
                              </div>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {ElBreadcrumb, ElBreadcrumbItem, ElButton, ElUpload} from 'element-plus'
import { addCollect, cancelCollect } from '~~/api/news'
import {competitionSession, getCompetitionApplyShow, getCompetitionDetail} from '~~/api/competition'
import feedback from '~~/utils/feedback'
import {useUserStore} from "~/stores/user";
const showEdit = ref(false)
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const { data: newsDetail, refresh } = await useAsyncData(
    () =>
        getCompetitionDetail({
            id: route.params.id
        }),
    {
        initialCache: false
    }
)

const applyShow = reactive({
  nanOne: '',
  nanTwo: '',
  nvOne: '',
  nvTwo: '',
  allTwo: '',
  competitionId: ''
})

const getSourceText = computed(() => {
    switch (route.params.source) {
        case 'hot':
            return '热门资讯'
        case 'new':
            return ' 最新资讯'
        default:
            return '全部资讯'
    }
})
const sessionData = reactive({
  playTypeOne:[],
  playTypeTwo:[],
  playTypeThree:[],
  playTypeFour:[],
  playTypeFive:[],
  playAddressFive: {},
  playAddressFour: {},
  playAddressOne: {},
  playAddressThree: {},
  playAddressTwo: {}
})
const handleMatch = async () => {
  competitionSession({
    id: route.params.id
  }).then(data=>{
    sessionData.playTypeOne = data.playTypeOne
    sessionData.playTypeTwo = data.playTypeTwo
    sessionData.playTypeThree = data.playTypeThree
    sessionData.playTypeFour = data.playTypeFour
    sessionData.playTypeFive = data.playTypeFive
    sessionData.playAddressFive =  data.playAddressFive
    sessionData.playAddressFour = data.playAddressFour
    sessionData.playAddressOne = data.playAddressOne
    sessionData.playAddressThree = data.playAddressThree
    sessionData.playAddressTwo = data.playAddressTwo
  })
}

const handelCollect = async () => {
    const id = route.params.id
    if (newsDetail.value.collect) {
        await cancelCollect({ id })
        feedback.msgSuccess('已取消收藏')
    } else {
        await addCollect({ id })
        feedback.msgSuccess('收藏成功')
    }
    refresh()
}
const handleApply = async (data: any) => {
  const apply = await getCompetitionApplyShow()
  Object.assign(applyShow, apply);
  showEdit.value = true
  await nextTick()
  // editRef.value?.getDetail(data)
}
const handlePlay = (param:any) => {
  router.push({
    path: '/competition/match/score',
    query: {
      id: param.competitionId,
      matchId: param.id
    }
  })
}
const { lockFn: handelCollectLock } = useLockFn(handelCollect)
handleMatch()
</script>
<style lang="scss">
.post-content p{
    margin-bottom: 16px !important;
    line-height: 1.6;
    font-size: 16px;
    text-indent: 2em;
    text-align: left;
}
.el-box .el-col-5{
  max-width: 20%;
  flex: 0 0 20%;
}

.el-box-2 >.el-col{
  max-width: 45%;
  //flex: 0 0 20%;
}

.el-box-3 >.el-col{
  max-width: 33%;
  //flex: 0 0 20%;
}

.el-box-4 >.el-col{
  max-width: 25%;
  //flex: 0 0 20%;
}

.el-box-5 >.el-col{
  max-width: 20%;
  //flex: 0 0 20%;
}

.match-card ul {
  list-style-type: none;
  padding: 0;
}

.match-card li {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.match-info {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
}
.match-header{
  position: relative;
  height: 25px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.team {
  display: flex;
  flex-direction: column;
}

/* 选手信息样式 */
.player-info {
  display: flex;
  align-items: center;
  margin: 5px 0;
}

/* VS 文本样式 */
.vs-text {
  font-size: 16px;
  font-weight: bold;
  color: #ff0000;
  margin: 0 5px;
}
.score-text{
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

/* 卡片样式 */
.match-card {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 每场比赛项样式 */
.match-item {
  padding: 20px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s ease;
}

.match-item:hover {
  background-color: #f9f9f9;
}

/* 出场顺序样式 */
.order {
  font-size: 12px;
  color: #333;
  font-weight: 700;
}

/* 队伍样式 */
.team {
  min-width: calc(50% - 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  & .one{
    text-align: left;
  }
  & .two{
    text-align: right;
  }
}

.el-box .el-col-5{
  max-width: 20%;
  flex: 0 0 20%;
}
.single-line {
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  width: 65px; /* 设置容器宽度，可根据实际情况调整 */
}
</style>
